<script lang="ts">
export default {
    name: 'UserInfo'
}
</script>
<script setup lang="ts">
import useInfoBaseModel from '@/composables/system/user/useInfoBaseModel';
import useUserInfo from '@/composables/system/user/useUserInfo';
import { ref } from 'vue';
// 基础数据
const { addModel, rules, changePasswordModel, passwordRules } = useInfoBaseModel()

const { activeName, editUserForm, changePasswordForm, close, save, changePassword } = useUserInfo(addModel, changePasswordModel)

</script>
<template>
    <el-main>
        <el-row>
            <el-col :span="8" :xs="24">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>个人信息</span>
                        </div>
                    </template>
                    <div class="info">
                        <div class="avatar">
                            <el-avatar size="large" :src="addModel.avatar" />
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                <div class="title">用户名称</div>
                                <div class="con">{{ addModel.username }}</div>
                            </li>
                            <li class="list-group-item">
                                <div class="title">用户昵称</div>
                                <div class="con">{{ addModel.nickname }}</div>
                            </li>
                            <li class="list-group-item">
                                <div class="title">手机号码</div>
                                <div class="con">{{ addModel.mobile }}</div>
                            </li>
                            <li class="list-group-item">
                                <div class="title">用户邮箱</div>
                                <div class="con">{{ addModel.email }}</div>
                            </li>
                            <li class="list-group-item">
                                <div class="title">所属角色</div>
                                <div class="con">{{ addModel.role_name }}</div>
                            </li>
                            <li class="list-group-item">
                                <div class="title">创建日期</div>
                                <div class="con">{{ addModel.created_at }}</div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16" :xs="24">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>基本资料</span>
                        </div>
                    </template>
                    <el-tabs v-model="activeName" class="userinfo-tabs">
                        <el-tab-pane label="基本资料" name="basic">
                            <el-form :model="addModel" ref="editUserForm" :rules="rules" label-width="80px">
                                <el-form-item prop="nickname" label="用户昵称">
                                    <el-input v-model="addModel.nickname"></el-input>
                                </el-form-item>
                                <el-form-item prop="mobile" label="手机号">
                                    <el-input v-model="addModel.mobile"></el-input>
                                </el-form-item>
                                <el-form-item prop="email" label="邮箱">
                                    <el-input v-model="addModel.email"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="close()">关闭</el-button>
                                    <el-button type="primary" @click="save()">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="修改密码" name="changePassword">
                            <el-form :model="changePasswordModel" ref="changePasswordForm" :rules="passwordRules"
                                label-width="80px">
                                <el-form-item prop="old_password" label="旧密码">
                                    <el-input show-password v-model="changePasswordModel.old_password"></el-input>
                                </el-form-item>
                                <el-form-item prop="password" label="新密码">
                                    <el-input show-password v-model="changePasswordModel.password"></el-input>
                                </el-form-item>
                                <el-form-item prop="confirm_password" label="确认密码">
                                    <el-input show-password v-model="changePasswordModel.confirm_password"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="close()">关闭</el-button>
                                    <el-button type="primary" @click="changePassword()">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
        </el-row>
    </el-main>
</template>
<style lang="scss" scoped>
.el-col {
    padding: 0 10px;

    .info {
        .avatar {
            text-align: center;

            .el-avatar--large {
                width: 120px;
                height: 120px;
            }
        }

        .list-group {
            margin-top: 10px;

            li {
                border-bottom: 1px solid #e7eaec;
                border-top: 1px solid #e7eaec;
                margin-bottom: -1px;
                padding: 11px 0;
                font-size: 13px;
                list-style: none;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>